<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../images/favicon.ico">

    <title>洲博通 - Dashboard  Color Class Utilities </title>
  
	<!-- Bootstrap 4.0-->
	<link rel="stylesheet" href="../../../assets/vendor_components/bootstrap/dist/css/bootstrap.min.css">
	
	<!-- Bootstrap extend-->
	<link rel="stylesheet" href="../../css/bootstrap-extend.css">

	<!-- Theme style -->
	<link rel="stylesheet" href="../../css/master_style.css">

	<!-- 洲博通 skins -->
	<link rel="stylesheet" href="../../css/skins/_all-skins.css">

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	
</head>

<body class="sidebar-collapse skin-blue sidebar-mini">
  <b data-toggle="push-menu" style="display:none"></b>
<div class="wrapper">


  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Color utilities
      </h1>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="breadcrumb-item"><a href="#">UI</a></li>
        <li class="breadcrumb-item active">Color utilities</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
		
      <!-- Color classes -->
      <div class="box">
		  <div class="box-header with-border">
          	<h4 class="box-title"><strong>Background</strong> colors</h4>
		  </div>

          <div class="box-body">
			<div class="row">
				<div class="col-lg-6 col-12">					
					<h5>Solid colors</h5>
					<p><code>.bg-*</code> can apply to any element, where <code>*</code> is a color name.</p>
					<div class="gap-items gap-y">
					  <span class="bg-primary d-inline-block d-inline-block text-center rounded p-15 w-150">.bg-primary (#7460ee)</span>
					  <span class="bg-secondary d-inline-block text-center rounded p-15 w-150">.bg-secondary (#e4e7ea)</span>
					  <span class="bg-success d-inline-block text-center rounded p-15 w-150">.bg-success (#26c6da)</span>
					  <span class="bg-info d-inline-block text-center rounded p-15 w-100">.bg-info (#1e88e5)</span>
					  <span class="bg-warning d-inline-block text-center rounded p-15 w-150">.bg-warning (#ffb22b)</span>
					  <span class="bg-danger d-inline-block text-center rounded p-15 w-150">.bg-danger (#fc4b6c)</span>
					  <span class="bg-purple d-inline-block text-center rounded p-15 w-150">.bg-purple (#7c277d)</span>
					  <span class="bg-pink d-inline-block text-center rounded p-15 w-150">.bg-pink (#FC3468)</span>
					  <span class="bg-cyan d-inline-block text-center rounded p-15 w-150">.bg-cyan (#57c7d4)</span>
					  <span class="bg-yellow d-inline-block text-center rounded p-15 w-150">.bg-yellow (#fcc525)</span>
					  <span class="bg-brown d-inline-block text-center rounded p-15 w-150">.bg-brown (#8d6658)</span>
					  <span class="bg-dark d-inline-block text-center rounded p-15 w-100">.bg-dark (#465161)</span>
					  <span class="bg-aqua d-inline-block text-center rounded p-15 w-150">.bg-aqua (#00FFFF)</span>
					  <span class="bg-light-blue d-inline-block text-center rounded p-15 w-150">.bg-light-blue (#ADD8E6)</span>
					  <span class="bg-blue d-inline-block text-center rounded p-15 w-150">.bg-blue (#398bf7)</span>
					  <span class="bg-green d-inline-block text-center rounded p-15 w-150">.bg-green (#06D73E)</span>
					</div>
				</div> 
				<div class="col-lg-6 col-12">						
					<h5>Pale colors</h5>
					<p><code>.bg-pale-*</code> can apply to any element, where <code>*</code> is a color name.</p>
					<div class="gap-items gap-y">
					  <span class="bg-pale-primary d-inline-block text-center rounded p-15 w-150">.bg-pale-primary (#e1dcff)</span>
					  <span class="bg-pale-secondary d-inline-block text-center rounded py-15 px-0 w-150">.bg-pale-secondary (#f7fafc)</span>
					  <span class="bg-pale-success d-inline-block text-center rounded p-15 w-150">.bg-pale-success (#c8e5e8)</span>
					  <span class="bg-pale-info d-inline-block text-center rounded p-15 w-150">.bg-pale-info (#e3f3fc)</span>
					  <span class="bg-pale-warning d-inline-block text-center rounded p-15 w-150">.bg-pale-warning (#fcf0e3)</span>
					  <span class="bg-pale-danger d-inline-block text-center rounded p-15 w-150">.bg-pale-danger (#fce3e3)</span>
					  <span class="bg-pale-purple d-inline-block text-center rounded p-15 w-150">.bg-pale-purple (#e4d2e4)</span>
					  <span class="bg-pale-pink d-inline-block text-center rounded p-15 w-150">.bg-pale-pink (#fce3ec)</span>
					  <span class="bg-pale-cyan d-inline-block text-center rounded p-15 w-150">.bg-pale-cyan (#e3fafc)</span>
					  <span class="bg-pale-yellow d-inline-block text-center rounded p-15 w-150">.bg-pale-yellow (#fcf8e3)</span>
					  <span class="bg-pale-brown d-inline-block text-center rounded p-15 w-150">.bg-pale-brown (#eddcd5)</span>
					  <span class="bg-pale-dark d-inline-block text-center rounded p-15 w-150">.bg-pale-dark (#c8c8c8)</span>
					</div>
				</div> 
				<div class="col-12">					
					<h5 class="mt-30">Other colors</h5>
					<p>Some other fade colors are available for background-color.</p>
					<div class="gap-items gap-y">
					  <span class="bg-white d-inline-block text-center rounded p-15 b-1 w-150">.bg-white</span>
					  <span class="bg-transparent d-inline-block text-center rounded p-15 b-1 w-150">.bg-transparent</span>
					  <span class="bg-light d-inline-block text-center rounded p-15 b-1 w-150">.bg-light</span>
					  <span class="bg-lighter d-inline-block text-center rounded p-15 b-1 w-150">.bg-lighter</span>
					  <span class="bg-lightest d-inline-block text-center rounded p-15 b-1 w-150">.bg-lightest</span>
					</div>
				</div>  
			</div>
          </div>
        </div>
      <!-- /.box -->
		
      <!-- Color classes -->
      <div class="box">
		  <div class="box-header with-border">
          	<h4 class="box-title"><strong>Gradient</strong> colors</h4>
		  </div>

          <div class="box-body">
			<div class="row">
				<div class="col-lg-6 col-12">					
					<h5>gradient colors</h5>
					<div class="gap-items gap-y">
					  <span class="bg-primary-gradient d-inline-block d-inline-block text-center rounded p-15 w-150">.bg-primary-gradient</span>
					  <span class="bg-secondary-gradient d-inline-block text-center rounded p-15 w-150">.bg-secondary-gradient</span>
					  <span class="bg-success-gradient d-inline-block text-center rounded p-15 w-150">.bg-success-gradient</span>
					  <span class="bg-info-gradient d-inline-block text-center rounded p-15 w-100">.bg-info-gradient</span>
					  <span class="bg-warning-gradient d-inline-block text-center rounded p-15 w-150">.bg-warning-gradient</span>
					  <span class="bg-danger-gradient d-inline-block text-center rounded p-15 w-150">.bg-danger-gradient</span>					  
					</div>
				</div> 
				<div class="col-lg-6 col-12">						
					<h5>gradient animet colors</h5>
					<div class="gap-items gap-y">
					  <span class="bg-primary-gradient-animet d-inline-block d-inline-block text-center rounded p-15 w-150">.bg-primary-gradient-animet</span>
					  <span class="bg-secondary-gradient-animet d-inline-block text-center rounded p-15 w-150">.bg-secondary-gradient-animet</span>
					  <span class="bg-success-gradient-animet d-inline-block text-center rounded p-15 w-150">.bg-success-gradient-animet</span>
					  <span class="bg-info-gradient-animet d-inline-block text-center rounded p-15 w-150">.bg-info-gradient-animet</span>
					  <span class="bg-warning-gradient-animet d-inline-block text-center rounded p-15 w-150">.bg-warning-gradient-animet</span>
					  <span class="bg-danger-gradient-animet d-inline-block text-center rounded p-15 w-150">.bg-danger-gradient-animet</span>					  
					</div>
				</div>  
			</div>
          </div>
        </div>
      <!-- /.box -->
		
      <!-- Color classes -->
      <div class="box">
		  <div class="box-header with-border">
          	<h4 class="box-title"><strong>SVG</strong> Img Background</h4>
		  </div>

          <div class="box-body">
			<div class="row">
				<div class="col-12">					
					<h5>SVG Background</h5>
					<div class="gap-items gap-y">
					  <span class="d-inline-block d-inline-block text-center rounded p-15 w-300 h-200 bg-primary bg-temple-dark"> .bg-temple-dark</span>
					  <span class="d-inline-block d-inline-block text-center rounded p-15 w-300 h-200 bg-info bg-food-dark"> .bg-food-dark</span>
					  <span class="d-inline-block d-inline-block text-center rounded p-15 w-300 h-200 bg-warning bg-brick-dark"> .bg-brick-dark</span>
					  <span class="d-inline-block d-inline-block text-center rounded p-15 w-300 h-200 bg-danger bg-bubbles-dark"> .bg-bubbles-dark</span>						
					</div>
				</div> 
				<div class="col-12">					
					<h5 class="mt-30">SVG Background</h5>
					<div class="gap-items gap-y">
					  <span class="d-inline-block d-inline-block text-center rounded p-15 w-300 h-200 b-1 bg-temple-white"> .bg-temple-white</span>
					  <span class="d-inline-block d-inline-block text-center rounded p-15 w-300 h-200 b-1 bg-food-white"> .bg-food-white</span>
					  <span class="d-inline-block d-inline-block text-center rounded p-15 w-300 h-200 b-1 bg-brick-white"> .bg-brick-white</span>
					  <span class="d-inline-block d-inline-block text-center rounded p-15 w-300 h-200 b-1 bg-bubbles-white"> .bg-bubbles-white</span>						
					</div>
				</div> 
			</div>
          </div>
        </div>
      <!-- /.box -->
		
		<div class="box">
		  <div class="box-header with-border">
          	<h4 class="box-title"><strong>Border</strong> colors</h4>
		  </div>

          <div class="box-body">
            <p><code>.border-*</code> can apply to any element, where <code>*</code> is a color name.</p>
            <div class="gap-items gap-y">
              <span class="b-1 d-inline-block d-inline-block text-center rounded p-15 w-150">Default color</span>
              <span class="b-1 border-primary d-inline-block text-center rounded p-15 w-150">.border-primary</span>
              <span class="b-1 border-secondary d-inline-block text-center rounded p-15 w-150">.border-secondary</span>
              <span class="b-1 border-success d-inline-block text-center rounded p-15 w-150">.border-success</span>
              <span class="b-1 border-info d-inline-block text-center rounded p-15 w-150">.border-info</span>
              <span class="b-1 border-warning d-inline-block text-center rounded p-15 w-150">.border-warning</span>
              <span class="b-1 border-danger d-inline-block text-center rounded p-15 w-150">.border-danger</span>
              <span class="b-1 border-purple d-inline-block text-center rounded p-15 w-150">.border-purple</span>
              <span class="b-1 border-pink d-inline-block text-center rounded p-15 w-150">.border-pink</span>
              <span class="b-1 border-cyan d-inline-block text-center rounded p-15 w-150">.border-cyan</span>
              <span class="b-1 border-yellow d-inline-block text-center rounded p-15 w-150">.border-yellow</span>
              <span class="b-1 border-brown d-inline-block text-center rounded p-15 w-150">.border-brown</span>
              <span class="b-1 border-dark d-inline-block text-center rounded p-15 w-150">.border-dark</span>
              <span class="b-1 border-white d-inline-block text-center rounded p-15 w-150">.border-white</span>
              <span class="b-1 border-light d-inline-block text-center rounded p-15 w-150">.border-light</span>
              <span class="b-1 border-transparent d-inline-block text-center rounded py-15 px-0 w-150">.border-transparent</span>
            </div>
          </div>
        </div>
		
	  <!-- /.box -->
		
		<div class="box">
		  <div class="box-header with-border">
          	<h4 class="box-title"><strong>Text</strong> colors</h4>
		  </div>

          <div class="box-body">
            <h5>Text colors</h5>
            <p><code>.text-*</code> can apply to any element, where <code>*</code> is a color name. Please note that you can safely add these classes to an <code>&lt;a&gt;</code> element.</p>
            <div class="gap-items gap-y">
              <span class="text-primary d-inline-block w-150">.text-primary</span>
              <span class="text-secondary d-inline-block w-150">.text-secondary</span>
              <span class="text-success d-inline-block w-150">.text-success</span>
              <span class="text-info d-inline-block w-150">.text-info</span>
              <span class="text-warning d-inline-block w-150">.text-warning</span>
              <span class="text-danger d-inline-block w-150">.text-danger</span>
              <span class="text-purple d-inline-block w-150">.text-purple</span>
              <span class="text-pink d-inline-block w-150">.text-pink</span>
              <span class="text-cyan d-inline-block w-150">.text-cyan</span>
              <span class="text-yellow d-inline-block w-150">.text-yellow</span>
              <span class="text-brown d-inline-block w-150">.text-brown</span>
              <span class="text-dark d-inline-block w-150">.text-dark</span>
              <span class="text-mute d-inline-block w-150">.text-mute</span>
              <span class="text-light d-inline-block w-150">.text-light</span>
              <span class="text-lighter d-inline-block w-150">.text-lighter</span>
              <span class="text-fade d-inline-block w-150">.text-fade</span>
              <span class="text-white d-inline-block w-150 bg-pale-dark">.text-white</span>
            </div>


            <hr>

            <h5>Hover colors</h5>
            <p><code>.hover-*</code> can apply to any element, where <code>*</code> is a color name. Please note that you can safely add these classes to an <code>&lt;a&gt;</code> element.</p>
            <div class="gap-items gap-y">
              <a class="hover-primary d-inline-block w-150" href="#">.text-primary</a>
              <a class="hover-secondary d-inline-block w-150" href="#">.text-secondary</a>
              <a class="hover-success d-inline-block w-150" href="#">.text-success</a>
              <a class="hover-info d-inline-block w-150" href="#">.text-info</a>
              <a class="hover-warning d-inline-block w-150" href="#">.text-warning</a>
              <a class="hover-danger d-inline-block w-150" href="#">.text-danger</a>
              <a class="hover-purple d-inline-block w-150" href="#">.text-purple</a>
              <a class="hover-pink d-inline-block w-150" href="#">.text-pink</a>
              <a class="hover-cyan d-inline-block w-150" href="#">.text-cyan</a>
              <a class="hover-yellow d-inline-block w-150" href="#">.text-yellow</a>
              <a class="hover-brown d-inline-block w-150" href="#">.text-brown</a>
              <a class="hover-dark d-inline-block w-150" href="#">.text-dark</a>
              <a class="hover-mute d-inline-block w-150" href="#">.text-mute</a>
              <a class="hover-light d-inline-block w-150" href="#">.text-light</a>
              <a class="hover-lighter d-inline-block w-150" href="#">.text-lighter</a>
              <a class="hover-fade d-inline-block w-150" href="#">.text-fade</a>
              <a class="hover-white d-inline-block w-150 bg-pale-dark" href="#">.text-white</a>
            </div>
          </div>
        </div>
		
	  <!-- /.box -->
		
    </section>
    <!-- /.content -->
  </div>




</div>
<!-- ./wrapper -->

	<!-- jQuery 3 -->
	<script src="../../../assets/vendor_components/jquery/dist/jquery.min.js"></script>
	
	<!-- popper -->
	<script src="../../../assets/vendor_components/popper/dist/popper.min.js"></script>
	
	<!-- Bootstrap 4.0-->
	<script src="../../../assets/vendor_components/bootstrap/dist/js/bootstrap.min.js"></script>
	
	<!-- SlimScroll -->
	<script src="../../../assets/vendor_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
	
	<!-- FastClick -->
	<script src="../../../assets/vendor_components/fastclick/lib/fastclick.js"></script>
	
	<!-- 洲博通 App -->
	<script src="../../js/template.js"></script>
	
	<!-- 洲博通 for demo purposes -->
	<script src="../../js/demo.js"></script>
	
	
</body>
</html>
